<template>
  <el-card class="stat-card">
    <div class="stat-content">
      <div class="stat-icon" :style="{ backgroundColor: iconBgColor }">
        <el-icon :size="24" :color="iconColor">
          <component :is="icon" />
        </el-icon>
      </div>
      <div class="stat-info">
        <div class="stat-value">{{ value }}</div>
        <div class="stat-label">{{ label }}</div>
      </div>
    </div>
    <div class="stat-footer" v-if="footer">
      <slot name="footer">{{ footer }}</slot>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  icon: any
  value: string | number
  label: string
  footer?: string
  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info'
}

const props = withDefaults(defineProps<Props>(), {
  footer: '',
  type: 'primary'
})

const iconBgColor = computed(() => {
  const colors: Record<string, string> = {
    primary: '#ecf5ff',
    success: '#f0f9eb',
    warning: '#fdf6ec',
    danger: '#fef0f0',
    info: '#f4f4f5'
  }
  return colors[props.type] || colors.primary
})

const iconColor = computed(() => {
  const colors: Record<string, string> = {
    primary: '#409eff',
    success: '#67c23a',
    warning: '#e6a23c',
    danger: '#f56c6c',
    info: '#909399'
  }
  return colors[props.type] || colors.primary
})
</script>

<style scoped>
.stat-card {
  width: 100%;
  margin-bottom: 20px;
}

.stat-content {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.stat-footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
  font-size: 12px;
  color: #999;
}
</style>